<?php

use falcon5\inc\Base\Common;
use falcon5\inc\Base\WPOption;
use falcon5\inc\Helpers\AssetsHelper;
use hollisho\helpers\ArrayHelper;

if (! defined('ABSPATH')) {
    exit;
}

$currentLocale = falcon5_wp_current_languages();
$activityTicket = ArrayHelper::getValue($params, WPOption::FC5_API_KEY, '');
$originalLanguage = ArrayHelper::getValue($params, WPOption::ORIGINAL_LANGUAGE);
$originalLanguage = $originalLanguage ?: $currentLocale;
$engineSupportLang = ArrayHelper::getValue($params, 'engineSupportLang');
$engineSupportLangMap = ArrayHelper::getValue($params, 'engineSupportLangMap');
$originalLanguageName = ArrayHelper::getValue($engineSupportLangMap, $originalLanguage);
$protocol = ArrayHelper::getValue($params, 'protocol');
$domain = ArrayHelper::getValue($params, 'domain');
$platformatUrl = Common::getPlatformProxyHost();


$isEnableCache=false;

if(defined('FC5_ENABLE_CACHE') && constant("FC5_ENABLE_CACHE")==true){
    $isEnableCache=true;
}
?>

<div id="wrap-falcon5">
    <div class="wrap">

        <div class="setting-page-container">
            <div class="tab-btn">
                <div class="tab-btn-item setting-container-btn action" data-tab="setting-container-box">Setting</div>
                <?php if($isEnableCache){?>
                <div class="tab-btn-item cache-container-btn" data-tab="cache-container-box">Cache</div>
                <?php }?>
            </div>
            <div class="setting-container-box active">
                <div class="setting-container">
                    <div class="main-configuration">
                        <h3 class="setting-block-title">Main Configuration</h3>

                        <div class="form-group fc5-api-key">
                            <div class="label-wrapper">
                                <label>API Key（<span><a style="color:blue;" href="<?php echo $platformatUrl ?>" target="_blank">Create API KEY</a></span>） :</label>
                                <div class="tips-icon" data-tooltip="Please enter a valid API KEY">
                                    <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/page/tips.svg" alt="tips">

                                </div>

                            </div>
                            <div class="input-wrapper">
                                <input type="text" id="activityTicket" placeholder="please enter apikey" value="<?php echo esc_attr($activityTicket); ?>">
                                <div class="sk-spinner">
                                    <div class="double-bounce1"></div>
                                    <div class="double-bounce2"></div>
                                </div>
                                <div class="input-icon">
                                    <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/page/succeed.svg" alt="succeed">
                                </div>
                                <div class="input-error" style="display: none;">Make sure you enter a valid Falcon5 API key!</div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="label-wrapper">
                                <label>Original language:</label>
                                <div class="tips-icon" data-tooltip="Original language of the current website?">
                                    <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/page/tips.svg" alt="tips">
                                </div>
                            </div>
                            <div class="custom-select" id="originalLanguage">
                                <div class="select-selected" data-value="<?php echo esc_attr($originalLanguage); ?>" data-name="<?php echo esc_attr($originalLanguageName); ?>">
                                    <div class="select-flag">
                                        <?php if ($originalLanguage) : ?>
                                            <img src="<?php echo esc_url(sprintf("%s/images/flags/%s.svg", AssetsHelper::getAssetUri(), $originalLanguage)); ?>" alt="<?php echo esc_attr($originalLanguageName); ?> flag" />
                                        <?php else: ?>
                                            <img style="display: none" src="" alt="" />
                                        <?php endif; ?>
                                    </div>
                                    <span class="select-text"><?php echo esc_html($originalLanguageName); ?></span>
                                    <span class="select-arrow"></span>
                                </div>
                                <div class="select-items select-hide">
                                    <?php foreach ($engineSupportLangMap as $key => $language): ?>
                                        <div class="select-item" data-value="<?php echo esc_attr($key); ?>" data-action="selectLanguage" data-name="<?php echo esc_attr($language); ?>">
                                            <div class="select-flag">
                                                <img src="<?php echo esc_url(sprintf("%s/images/flags/%s.svg", AssetsHelper::getAssetUri(), $key)); ?>" alt="<?php echo esc_attr($language); ?> flag" />
                                            </div>
                                            <span class="select-text"><?php echo esc_html($language); ?></span>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>

                        <div class="language-button-design">
                            <h3 class="setting-block-title">Language button design</h3>
                            <div class="form-group" style="display: none;">
                                <label>Enable CDN:</label>
                                <div class="checkbox-wrapper">
                                    <input type="checkbox" id="enableCdn">
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Show in menu:</label>
                                <div class="custom-select" id="showInMenu">
                                    <div class="select-selected" data-value="none">
                                        <span class="select-text">- None -</span>
                                        <span class="select-arrow"></span>
                                    </div>
                                    <div class="select-items select-hide">
                                        <div class="select-item" data-value="none" data-action="selectOption">
                                            <span class="select-text">- None -</span>
                                        </div>
                                        <?php $menus = get_registered_nav_menus(); ?>
                                        <?php foreach ($menus as $location => $description): ?>
                                            <div class="select-item" data-value="<?php echo esc_attr($location); ?>" data-action="selectOption">
                                                <span class="select-text"><?php echo esc_attr($description); ?></span>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Show floating language selector:</label>
                                <div class="custom-select" id="floatingSelector">
                                    <div class="select-selected" data-value="none">
                                        <span class="select-text">- None -</span>
                                        <span class="select-arrow"></span>
                                    </div>
                                    <div class="select-items select-hide">
                                        <div class="select-item" data-value="none" data-action="selectOption">
                                            <span class="select-text">- None -</span>
                                        </div>
                                        <div class="select-item" data-value="bottom-left" data-action="selectOption">
                                            <span class="select-text">Bottom Left</span>
                                        </div>
                                        <div class="select-item" data-value="bottom-right" data-action="selectOption">
                                            <span class="select-text">Bottom Right</span>
                                        </div>
                                        <div class="select-item" data-value="top-left" data-action="selectOption">
                                            <span class="select-text">Top Left</span>
                                        </div>
                                        <div class="select-item" data-value="top-right" data-action="selectOption">
                                            <span class="select-text">Top Right</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--                            <div class="form-group">-->
                            <!--                                <label>Wrapper selector CSS:</label>-->
                            <!--                                <div class="custom-select" id="wrapperSelector">-->
                            <!--                                    <div class="select-selected" data-value="falcon5_wrapper">-->
                            <!--                                        <span class="select-text">falcon5_wrapper</span>-->
                            <!--                                        <span class="select-arrow"></span>-->
                            <!--                                    </div>-->
                            <!--                                    <div class="select-items select-hide">-->
                            <!--                                        <div class="select-item" data-value="falcon5_wrapper" data-action="selectOption">-->
                            <!--                                            <span class="select-text">falcon5_wrapper</span>-->
                            <!--                                        </div>-->
                            <!--                                        <div class="select-item" data-value="custom" data-action="selectOption">-->
                            <!--                                            <span class="select-text">Custom</span>-->
                            <!--                                        </div>-->
                            <!--                                    </div>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <div class="form-group">
                                <div class="label-wrapper">
                                    <label style="font-size: 13px;">Wrapper selector CSS:</label>
                                    <div class="tips-icon" data-tooltip="If you want the language selector to appear inside a particular HTML element on your page then this option is for you. You simply need to write a CSS selector to point to that HTML element and GTranslate will appear inside of it.">
                                        <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/page/tips.svg" alt="tips">
                                    </div>
                                </div>
                                <div class="scustom-select">
                                    <input type="text" id="wrapperSelector" value="">

                                </div>
                            </div>

                            <div class="form-group">
                                <label>Open direction:</label>
                                <div class="custom-select" id="openDirection">
                                    <div class="select-selected" data-value="bottom">
                                        <span class="select-text">Bottom</span>
                                        <span class="select-arrow"></span>
                                    </div>
                                    <div class="select-items select-hide">
                                        <div class="select-item" data-value="bottom" data-action="selectOption">
                                            <span class="select-text">Bottom</span>
                                        </div>
                                        <div class="select-item" data-value="top" data-action="selectOption">
                                            <span class="select-text">Top</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group" style="display: none;">
                                <label>Flag size:</label>
                                <div class="custom-select" id="flagSize">
                                    <div class="select-selected" data-value="16px">
                                        <span class="select-text">16px</span>
                                        <span class="select-arrow"></span>
                                    </div>
                                    <div class="select-items select-hide">
                                        <div class="select-item" data-value="16px" data-action="selectOption">
                                            <span class="select-text">16px</span>
                                        </div>
                                        <div class="select-item" data-value="24px" data-action="selectOption">
                                            <span class="select-text">24px</span>
                                        </div>
                                        <div class="select-item" data-value="32px" data-action="selectOption">
                                            <span class="select-text">32px</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Flag style:</label>
                                <div class="custom-select" id="flagStyle">
                                    <div class="select-selected" data-value="2d">
                                        <span class="select-text">2D</span>
                                        <span class="select-arrow"></span>
                                    </div>
                                    <div class="select-items select-hide">
                                        <div class="select-item" data-value="2d" data-action="selectOption">
                                            <span class="select-text">2D</span>
                                        </div>
                                        <div class="select-item" data-value="3d" data-action="selectOption">
                                            <span class="select-text">3D</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="caches-settings" style="display: none;">

                                <div class="form-group">
                                    <div class="label-wrapper">
                                        <label>Open cache directory:</label>
                                        <div class="tips-icon" data-tooltip="define('FALCON5_CACHE_DIR')  changeable cache generation directory">
                                            <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/page/tips.svg" alt="tips">

                                        </div>
                                    </div>
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" id="openCacheDir">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div id="cacheDirectoryInfo" class="cache-directory-info">
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="flag-languages">
                            <h3 class="setting-block-title flag-languages-title">
                                <span>Flag Languages</span>
                                <div class="check-all-container">
                                    <div class="language-item check-all"><input type="checkbox" id="check-all"><label for="check-all">Check
                                            All</label></div>
                                </div>
                            </h3>
                            <div class="hint-text">
                                <span class="hint-text-blod">HlNT:</span>
                                <!--                                <span> To reorder the languages simply drag and drop them in the list below.</span>-->
                                <span>Current package can only be used in 1 languages, please upgrade your package if you need more languages.</span>
                            </div>
                            <div class="language-grid" id="languageGrid">
                                <!-- JavaScript will populate this -->
                            </div>
                        </div>
                    </div>

                    <div class="widget-preview">
                        <h3 class="setting-block-title">Widget Preview</h3>
                        <div class="preview-selector">
                            <div class="form-group">
                                <div class="custom-select" id="previewLanguage">
                                    <div class="select-selected" data-value="en">
                                        <div class="select-flag">
                                            <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/flags/en.svg" alt="English flag" />
                                        </div>
                                        <span class="select-text">English</span>
                                        <span class="select-arrow"></span>
                                    </div>
                                    <div class="select-items select-hide">
                                        <?php foreach ($engineSupportLangMap as $code => $name): ?>
                                            <div class="select-item" data-value="<?php echo esc_attr($code); ?>" data-action="selectLanguage">
                                                <div class="select-flag">
                                                    <img src="<?php echo esc_url(sprintf("%s/images/flags/%s.svg", AssetsHelper::getAssetUri(), $code)); ?>" alt="<?php echo esc_attr($name); ?> flag" />
                                                </div>
                                                <span class="select-text"><?php echo esc_attr($name); ?></span>
                                            </div>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="color-options">
                            <h3 class="setting-block-title color-options-title">
                                Color Options
                                <!--                                <span class="title-hint-text">( light | dark )</span>-->
                            </h3>
                            <div class="color-picker">
                                <label>Switcher text color:</label>
                                <input type="color" id="switcherTextColor">
                            </div>
                            <div class="color-picker">
                                <label>Switcher arrow color:</label>
                                <input type="color" id="switcherArrowColor">
                            </div>
                            <div class="color-picker">
                                <label>Switcher border color:</label>
                                <input type="color" id="switcherBorderColor" value="#e5e6eb">
                            </div>
                            <div class="color-picker">
                                <label>Switcher background color:</label>
                                <input type="color" id="switcherBgColor" value="#ffffff">
                            </div>
                            <div class="color-picker">
                                <label>Switcher background shadow color:</label>
                                <input type="color" id="switcherBgShadowColor" value="#ffffff">
                            </div>
                            <div class="color-picker">
                                <label>Switcher background hover color:</label>
                                <input type="color" id="switcherBgHoverColor" value="#ffffff">
                            </div>
                            <div class="color-picker">
                                <label>Dropdown text color:</label>
                                <input type="color" id="dropdownTextColor">
                            </div>
                            <div class="color-picker">
                                <label>Dropdown hover color:</label>
                                <input type="color" id="dropdownHoverColor" value="#e0f0ff">
                            </div>
                            <div class="color-picker">
                                <label>Dropdown background color:</label>
                                <input type="color" id="dropdownBgColor" value="#ffffff">
                            </div>
                        </div>

                        <div class="positioning-tips">
                            <h3 class="setting-block-title">Language selector positioning tips</h3>
                            <ul class="tips-list">
                                <li>You can use Falcon5 Widget in any pre-defined widget locations.</li>
                                <li><span class="color">[Falcon5] </span> shortcode can be used anywhere on your website.</li>
                                <li><span class="color" style="display: inline-block;">[fc5-link lang="en" label="English"] </span>
                                    shortcode can be used to render individual
                                    language links.</li>
                            </ul>
                        </div>
                    </div>
                    <div class="language-format" style="display: none;">
                        <h3 class="setting-block-title">Language Format</h3>
                        <div class="format-options">
                            <div class="format-option">
                                <input type="radio" id="sub-directory" name="format" value="sub-directory" checked>
                                <label for="sub-directory">
                                    <span class="option-title">sub-directory</span>
                                    <span class="option-example"><?php echo esc_html(sprintf("(%s://%s/en/)", $protocol, $domain)); ?></span>
                                </label>
                            </div>
                            <div class="format-option">
                                <input type="radio" id="sub-domain" name="format" value="sub-domain">
                                <label for="sub-domain">
                                    <span class="option-title">sub-domain</span>
                                    <span class="option-example"><?php echo esc_html(sprintf("(%s://en.%s)", $protocol, $domain)); ?></span>
                                </label>
                            </div>
                        </div>
                        <div class="language-links">
                            <!-- JavaScript will populate this -->
                        </div>
                    </div>

                </div>
                <button class="save-btn" onclick="saveSettings()" disabled>Save</button>
            </div>
            <div class="cache-container-box">
                <div class="cache-container">
                    <div class="search-area">
                        <div class="search-input">
                            <input type="text" placeholder="please enter page">
                            <div class="search-icon">
                                <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/page/search.svg" alt="search">
                            </div>
                        </div>
                        <div class="search-input">
                            <input type="text" placeholder="please enter language">
                            <div class="search-icon">
                                <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/page/search.svg" alt="search">
                            </div>
                        </div>
                    </div>

                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>SerialNo</th>
                                    <th>Page</th>
                                    <th>Language</th>
                                    <!--                                <th>Words</th>-->
                                    <th>CachingTime</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- many table row -->
                            </tbody>
                        </table>
                    </div>

                    <div class="pagination">
                        <div class="pagination-left">
                            <button class="prev-btn">&lt;</button>
                            <div class="page-numbers">

                            </div>
                            <button class="next-btn">&gt;</button>
                        </div>
                        <div class="pagination-right">
                            <span>Go to</span>
                            <input type="text" class="goto-input" value="">
                            <span>page</span>
                        </div>
                    </div>

                    <!-- translation modal -->
                    <div class="translation-modal" style="display: none;">
                        <div class="modal-header">
                            <div class="modal-title">
                                <span>Chinese (Simplified)</span>
                                >
                                <span>Index.html</span>
                            </div>
                            <div class="modal-actions">
                                <!--                                <div class="magnify-btn">-->
                                <!--                                    <img src="--><?php //echo esc_url(AssetsHelper::getAssetUri()) 
                                                                                        ?><!--/images/page/magnify.svg" alt="copy">-->
                                <!--                                </div>-->
                                <div class="close-btn">
                                    <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/page/close.svg" alt="close">
                                </div>
                            </div>
                        </div>
                        <div class="modal-content">
                            <div class="modal-content-top">

                                <div class="search-box">
                                    <input type="text" placeholder="Search for Translations">
                                    <div class="search-icon">
                                        <img src="<?php echo esc_url(AssetsHelper::getAssetUri()) ?>/images/page/search.svg" alt="search">
                                    </div>
                                </div>
                                <div class="translation-info">
                                    <!--                                    <span class="words">5,120</span>-->
                                    <!--                                    <span>words</span>-->
                                </div>
                            </div>
                            <div class="translation-list">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>original</th>
                                            <th>translated</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- JavaScript will populate this -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="modal-pagination">
                                <!-- JavaScript will populate this -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="display: none;">
            <input type="hidden" id="maxSupportedLanguages" value='<?php echo ArrayHelper::getValue($params, 'maxSupportedLanguages', 1); ?>' />"
        </div>

        <script>
            const languages = <?php echo json_encode($engineSupportLang); ?>;
            const assetsUri = <?php echo json_encode(AssetsHelper::getAssetUri()); ?>;
        </script>
    </div>
</div>